// 定义消息组件
import {BaseElement, baseStyle, ChatStatus} from "./base.js";

class ChatTip extends BaseElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.adoptedStyleSheets = [baseStyle];
    }

    tip = null;
    content = '';
    connectedCallback() {
        this.render();
    }

    onReceive(key, value) {
        switch (key) {
            case "chatInstance":
                this.chatInstance.addChatStatusListener((status) => {
                    this.changeState(status);
                })
        }
    }

    changeState(status) {
        if (!this.tip) return;

        switch (status) {
            case ChatStatus.IS_READY:
            case ChatStatus.IS_RECEIVING:
                this.tip.classList.remove('show');
                break;
            case ChatStatus.DISCONNECTED:
                this.tip.classList.add('show');
                this.content.innerHTML = `
                <div class="tip-content-wrapper">
                    <span class="text">网络异常，尝试连接中</span>
                    <span class="dots"><span>.</span><span>.</span><span>.</span></span>
                </div>
            `;
                break;
            case ChatStatus.IS_WAITING:
                this.tip.classList.add('show');
                this.content.innerHTML = `
                <div class="loader"></div>
            `;
                break;
        }
    }

    render() {
        this.shadowRoot.innerHTML = `
        <style>
            :host {
                overflow-y: auto;
                padding: 1rem !important;
            }

        </style>
        <div class="ja tip">
            <div class="tip-content"></div>
        </div>
    `;
        this.tip = this.shadowRoot.querySelector('.tip');
        this.content = this.shadowRoot.querySelector(".tip-content");
    }
}

export default ChatTip;